<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评论字数统计</title>
    <style>
        .版面 {
            min-width: 400px; /* 最小和最大 宽度 */
            max-width: 800px;
            display: flex; /* flex布局 */
            justify-content: flex-end; /*主轴对齐方式:末尾对齐, 这里效果右对齐*/
        }

        .头像 {
            width: 48px; /* 宽高 */
            height: 48px;
            border-radius: 50%; /* 边框线 圆角属性, 这里是变成圆形 */
            overflow: hidden; /* 溢出:隐藏 */
            background: url(../素材/用户头像.jpg) no-repeat center / cover; /* 插入背景图  不平铺   居中/覆盖背景区 */
            margin-right: 20px; /* 右外边距 */
        }

        /* 文本域 输入框 */
        .版面 textarea {
            outline: none; /* 去除点击文本域, 出现默认的 大边框 */
            border-color: transparent; /* 文本域 边框线透明, 效果不显示边框线 */
            resize: none; /*  resize 用于设置元素是否可调整尺寸，以及可调整的方向.  这里我们设置none,文本输入框不能拖拽变换大小 */
            background: #f5f5f5; /* 背景色 */
            border-radius: 4px; /* 边框线 圆角属性 */
            flex: 1; /* 把剩余 flex布局 的宽度,都给于.   这里是给 文本框 */
            padding: 10px; /* 内边距 */
            transition: all 0.5s; /* 过渡属性, 渐变效果 */
            height: 30px; /* 文本框 高 */
        }

        /* :focus 伪类选择器  获得焦点.  这里鼠标点击文本框,获得焦点*/
        .版面 textarea:focus {
            border-color: #e4e4e4; /* 边框线 颜色 */
            background: #fff; /* 背景颜色 */
            height: 50px; /* 文本框 高 */
        }

        /* 按钮 设置属性 */
        .版面 button {
            background: #00aeec; /* 背景色 */
            color: #fff; /* 文字颜色 */
            border: none; /* 去除 边框线 */
            border-radius: 4px; /* 边框线 圆角属性 */
            margin-left: 10px; /* 左外边距 */
            width: 70px; /* 高 */
            cursor: pointer; /* 鼠标形状, 这里是鼠标悬停就关闭鼠标形状 */
        }

        .版面 .字符计数 {
            margin-right: 80px; /* 右外边距 */
            margin-top: 5px; /* 上外边距 */
            color: #999; /* 文字颜色 */
            opacity: 0; /* 透明度, 这里设置0 完全透明. 这里说明下JS里会修改 值,以实现显示和隐藏 互相切换 */
            transition: all 0.5s; /* 过渡属性, 显示有渐变的效果 */
        }

        .显示文本_版面 {
            min-width: 400px; /* 最小和最大 宽度 */
            max-width: 800px;
            display: flex; /* flex布局 */
        }

        .显示文本_版面 .项目 {
            width: 100%; /* 宽度 随父级 */
            display: flex; /* flex布局 */
        }

        .显示文本_版面 .项目 .文本显示区域 {
            flex: 1; /* 把剩余 flex布局 的宽度,都给于.   这里是给 文本框 */
            border-bottom: 1px dashed #e4e4e4;
            padding-bottom: 10px;
        }

        .显示文本_版面 .项目 p {
            margin: 0; /* 外边距, 这里设置0,是消除段落上下的大间隔 */
        }

        .显示文本_版面 .项目 .姓名 {
            color: #FB7299; /* 文字颜色 大小 加粗 */
            font-size: 14px;
            font-weight: bold;
        }

        .显示文本_版面 .项目 .显示输入的文字 {
            color: #333; /* 文字颜色 */
            padding: 10px 0; /* 内边距2值写法,  上下 左右*/
        }

        .显示文本_版面 .项目 .显示日期 {
            color: #999; /* 文字颜色 大小 */
            font-size: 12px;
        }
    </style>
</head>
<body>

<div class="版面">
    <i class="头像"></i>
    <label for="文本域"></label><textarea id="文本域" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
    <button>发布</button>
</div>
<div class="版面">
    <span class="字符计数">0/200字</span>
</div>
<div class="显示文本_版面">
    <div class="项目" style="display: none;"> <!-- display: none; 不显示, 这里是隐藏这几段文字. 下面JS会修改显示属性,以实现隐藏和显示切换效果-->
        <i class="头像"></i>
        <div class="文本显示区域">
            <p class="姓名">清风徐来</p>
            <p class="显示输入的文字">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p>
            <p class="显示日期">2023-12-4 15:24:50</p>
        </div>
    </div>
</div>

<!--
需求：用户输入文字，可以计算用户输入的字数
分析：
①：判断用输入事件 input
②：不断取得文本框里面的字符长度, 文本域.value.length
③：把获得数字给下面文本框
-->

<!--
需求：按下回车键盘，可以发布信息
分析：
①：用到按下键盘事件 keydown 或者 keyup 都可以
②：如果用户按下的是回车键盘，则发布信息
③：让留言信息模块显示，把拿到的数据渲染到对应标签内部
-->
<script>

    // ------ 需求：用户输入文字，可以计算用户输入的字数--------
    // 获取DOM元素
    const 文本域 = document.querySelector('#文本域') // # 是选择, id选择器
    const 字符计数 = document.querySelector('.字符计数')

    // 1. 当我们文本域获得了焦点，就让 "字符计数" 显示出来
    文本域.addEventListener('focus', function () {
        字符计数.style.opacity = 1  // opacity 透明度, 原先是透明的 这里修改成不透明
    })

    // 2. 当我们文本域失去了焦点，就让 "字符计数" 隐藏出来
    文本域.addEventListener('blur', function () {
        字符计数.style.opacity = 0  // opacity 透明度, 失去 焦点事件 时,在改成透明
    })

    // 3. 检测用户输入, 监控文本事件
    文本域.addEventListener('input', function () {
        let 字符串长度 = 文本域.value.length  // value是显示文本域里,输入的文字,是一个字符串   length是检查长度
        字符计数.innerHTML = `${字符串长度}/200字` // 实时显示输入的字数
    })


    // ------ 需求：按下回车键盘，可以发布信息 --------
    // 获取DOM元素
    const 项目_显示的文字段 = document.querySelector('.显示文本_版面 .项目')
    const 显示输入的文字 = document.querySelector('.显示文本_版面 .显示输入的文字')
    const 显示日期 = document.querySelector('.显示文本_版面 .显示日期')

    // 监控 输入框 松开键盘 操作
    文本域.addEventListener('keyup', function (事件对象) {
        console.log(事件对象.key) // 事件对象的属性 key 是键盘键的值, 控制台输出看各个键盘值是多少

        // 判断按下的是否,是 回车键
        if (事件对象.key === 'Enter') {
            显示输入的文字.innerHTML = 文本域.value // 读取 文本域.value 的字符串, 赋值修改元素对应标签的文本信息
            项目_显示的文字段.style.display = 'block' // 修改标签属性, 显示:块级. 这里是把原先 隐藏属性改成看见属性

            const 系统当前时间 = new Date().toLocaleString('zh-cn'); // 获取系统当前时间
            显示日期.innerHTML = `${系统当前时间}` // 修改标签文本, 显示当前日期时间

            文本域.value = '' // 发布完评论，清空文本域 输入框.  中间不要加空格,是空字符串
            字符计数.innerHTML = '0/200字' // 按下回车之后，就要把 字符统计 复原
        }
    })
</script>

</body>
</html>